<script setup lang="ts">

import { ref } from 'vue'
import {Socket} from "@/utils/websocket";

defineOptions({
  name: "Websocket"
});
// 输入框数据
const text = ref('')
// ws接收数据
const receiveData = ref('')
/**
 * @Description: 定义Socket接收方法
 * @param message 接收到的数据
 * @author guoKe
 * @date 2023/7/3
*/
const wsReceive = (message: any) => {
  if (message.type === 'message') {
    console.log(message.data);
    receiveData.value = receiveData.value ?  receiveData.value + '</br>' + message.data : message.data
  }
}
// 回车后发送文本框数据
const send = () => {
  Socket.getInstance().send(text.value)
  // 发送后清空输入框内容
  text.value = ''
}
// 初始化Socket请求并绑定
Socket.getInstance().init(wsReceive)

</script>

<template>
  <div class="container" >
    <div v-html="receiveData"></div>
    <textarea v-model="text"></textarea>
    <el-button @click="send">发送</el-button>
    <el-input v-model="text" />
  </div>

</template>

<style scoped lang="scss">

</style>
